<template>
  <div class="digital-flop-component" :style="{
      '--margin': `${option.margin}px`,
      '--fontSize1': `${option.fontSize1}px`,
      '--fontWeight1': `${option.fontWeight1}`,
      '--fontColor1': `${option.fontColor1}`,
    }">
    <DigitalItem
        v-for="(item, index) in integerDigitalArray"
        :key="getItemKey(index)"
        :data="item"
        :option="option"
    ></DigitalItem>
    <template v-if="option.decimalPlaceNumber > 0 && decimalDigitalArray.length > 0">
      <div class="xiaoshudian">.</div>
      <DigitalItem
          v-for="(item, index) in decimalDigitalArray"
          :key="index"
          :data="item"
          :option="option"
      ></DigitalItem>
    </template>
  </div>
</template>

<script setup lang="ts">
import {PropType, ref, watch} from "vue";
import DigitalItem from "./DigitalItem.vue";

const props = defineProps({
  value: {
    type: [String, Number],
    default: ref('0')
  },
  option: {
    type: Object,
    default: () => ({})
  }
})

// 整数数组
const integerDigitalArray = ref<string[]>([]);
// 小数数组
const decimalDigitalArray = ref<string[]>([]);

watch(
    () => props.value,
    () => {
      initDigitalData(props.value);
    },
    { immediate: true, deep: true }
);

watch(
    () => props.option,
    () => {
      initDigitalData(props.value);
    },
    { immediate: true, deep: true }
);

/**
 * 设置整数数组
 * @param digitalValue
 */
function initDigitalData(digitalValue: string | number) {
  let integerArray = [];
  if (typeof digitalValue !== 'string') {
    digitalValue = digitalValue.toString()
  }
  // 显示小数位
  if (props.option.decimalPlaceNumber > 0) {
    const value = parseFloat(digitalValue).toFixed(props.option.decimalPlaceNumber);
    const index = value.indexOf(".");
    decimalDigitalArray.value = value.substring(index + 1).split("");
    integerArray = value.substring(0, index).split("");
  } else {
    decimalDigitalArray.value = [];
    integerArray = digitalValue.toString().split("");
  }
  const addZero = (array: string[], minLength: number) => {
    if (array.length < minLength) {
      array.unshift("0");
      addZero(array, minLength);
    }
  };
  if (props.option.minLength) {
    addZero(integerArray, props.option.minLength);
  }
  // 添加千分位
  if (props.option.isShowSeparator) {
    integerArray = addSeparator(integerArray);
  }
  integerDigitalArray.value = integerArray;
}

/**
 * 添加千分号
 * @param array
 */
function addSeparator(array: Array<string>) {
  const dataArray = array.reverse();
  const separatorArray = [];
  while (dataArray.length) {
    separatorArray.push(dataArray.splice(0, 3).join(""));
  }
  return separatorArray.join(",").split("").reverse();
}

// 设置关键字，从小数位开始向左为1，避免出现数字变大时的显示问题
function getItemKey(index: number) {
  return integerDigitalArray.value.length - index;
}
</script>

<style lang="scss" scoped>
.digital-flop-component {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;

  .digital-item-component {
    margin-right: var(--margin);
  }

  .digital-item-component:last-child {
    margin-right: 0;
  }
}

.xiaoshudian {
  display: inline-flex;
  margin-right: var(--margin);
  text-align: center;
  font-size: var(--fontSize1);
  font-weight: var(--fontWeight1);
  color: var(--fontColor1);
  line-height: 0;
}

</style>